<?php

use yii\helpers\Url;
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use website\helpers\Render;
use common\models\User;
use common\models\Design;
use common\models\Category;
use common\models\UserUpload;

$this->addCrumbs('等级验证');
$this->title = '设计师等级选择';
?>

<style>
    .one{margin-left: 95px;margin-top: 5px;}
    .form-item{height:260px;}
    .boxing-one{height: 90%;margin-left: 20px;float: left;width: 18%;}
    .boxing-one-img{width: 100%; margin: 0 auto;}
    .fontsize{margin-top: 15px;text-align: center;font-family: Cantarell-Bold, Arial, sans-serif;}
</style>
<div class="contenter">
    <?= $this->render('/user/user_information', ['active' => 'information']) ?>
    <div id="top-processt"></div>
    <div id="user-contentero">
        <div class="box-shadow" id="sub-contenter">
            <div class="data-title"><span class="h3"><?= $this->title ?></span></div>
            <div class="data-content flyer-form">

                <form class="mt-20px" id="flyer-create" enctype="multipart/form-data" onsubmit="return false;">
                    <div class="form-item checker">
                        <div class="checker">
                            <label for="one">
                                <div class="boxing-one">
                                    <img class ="boxing-one-img" src="<?= Url::to('@web/web/static/image/user/one.png') ?>" />
                                    <div class="fontsize red-choise">
                                        <input id="one"  name="level" value="0" data-status="gray" type="radio" flyer="radio" title="游刃有余" class="tabler" />
                                    </div>
                                </div>
                            </label>
                        </div>
                        <div class="checker">
                            <label for="two">
                                <div class="boxing-one">
                                    <img class ="boxing-one-img" src="<?= Url::to('@web/web/static/image/user/two.png') ?>" />
                                    <div class="fontsize red-choise">
                                        <input id="two"  name="level" value="1" data-status="gray" type="radio" flyer="radio" title="炉火纯青" class="tabler" />
                                    </div>
                                </div>
                            </label>
                        </div>
                        <div class="checker">
                            <label for="three">
                                <div class="boxing-one">
                                    <img class ="boxing-one-img" src="<?= Url::to('@web/web/static/image/user/three.png') ?>" />
                                    <div class="fontsize red-choise">
                                        <input id="three"  name="level" value="2" data-status="gray" type="radio" flyer="radio" title="技压群雄" class="tabler" />
                                    </div>
                                </div>
                            </label>
                        </div>
                        <div class="checker">
                            <label for="four">
                                <div class="boxing-one">
                                    <img class ="boxing-one-img" src="<?= Url::to('@web/web/static/image/user/four.png') ?>" />
                                    <div class="fontsize red-choise">
                                        <input id="four"  name="level" value="3" data-status="gray" type="radio" flyer="radio" title="出神入化" class="tabler" />
                                    </div>
                                </div>
                            </label>
                        </div>
                        <div class="checker">
                            <label for="five">
                                <div class="boxing-one">
                                    <img class ="boxing-one-img" src="<?= Url::to('@web/web/static/image/user/five.png') ?>" />
                                    <div class="red-choise fontsize">
                                        <input id="five"  name="level" value="4" data-status="gray" type="radio" flyer="radio" title="登峰造极" class="tabler" />
                                    </div>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title"></div>
                        <div class="input-inline" style="margin-left: 1000px;">
                            <button class="flyer-button normal border-round" id="save-button" type="submit">下一步</button>
                        </div>
                    </div>
                    <textarea id="flyer-create-json" data-form="#flyer-create" style="display:none;"><?= User::checker('verificationgrade') ?></textarea>
                    <input type="hidden" name="_csrf" value="<?= Yii::$app->request->getCsrfToken() ?>">
                </form>
            </div>
        </div>
    </div>
</div>

<script src="<?= Render::static('flyer/flyer.class.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script>
    var checkerClass = new checker();
    $(document).ready(function() {
        // 表单美化
        (new flyer).init({ form: '#flyer-create' });
        // 表单数据验证
        checkerClass.init({ ruleDom: '#flyer-create-json' });
        $('#save-button').bind('click', function() {
            console.log(new FormData($('#flyer-create')[0]));
            if(checkerClass.validate()) {
                $.ajax({
                    url: "<?= Url::to('@web/designer/verificationgrade') ?>",
                    cache: false,
                    data: new FormData($('#flyer-create')[0]),
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    dataType:"json",
                    success: function(response) {
                        if(response.code == 200) {
                            layer.alert('下一步', { icon: 6 }, function() {
                                window.location.href = "<?= Url::to('@web/designer/bond') ?>";
                            });
                        }
                        else {
                            layer.msg(response.message, { shift: 6 });
                        }
                        $('#save-button').removeAttr('disabled').html('保存');
                    }
                });
            }
        });
    });
</script>